<template>
	<view class=my>
		<div class="login">
			<div class="myImg">
				<img :src="user.img!=''?user.img:'../../static/images/cs.png'" class="log" alt="">
			</div>
			<button class="but" @click="login">{{user.name!=''?user.name:'点击登录授权'}}</button>
		</div>
		<view class="lies">
			<view class="lies-bot" >
				<div>
					<image class="tj" src="../../static/images/fx.png" mode=""></image>
					<text class="pars">推荐好友</text>
					
				</div>
				<button open-type="share" @click="newName" class="buts">
					<image class="imgsss" src="../../static/images/right-arrow.png" mode=""></image>
				</button>
			</view>
			<view class="lies-bot">
				<div>
					<image class="tj" src="../../static/images/gy.png" mode=""></image>
					<text class="pars">联系客服</text>
				</div>
				<div>
					>
				</div>
			</view>
			<view class="lies-bot">
				<div>
					<image class="tj" src="../../static/images/xh.png" mode=""></image>
					<text class="pars">意见反馈</text>
				</div>
				<div>
					>
				</div>
			</view>
			<view class="lies-bot">
				<div>
					<image class="tj" src="../../static/images/ss.png" mode=""></image>
					<text class="pars">视频选号</text>
				</div>
				<div>
					>
				</div>
			</view>
			<view class="lies-bot">
				<div>
					<image class="tj" src="../../static/images/ds.png" mode=""></image>
					<text class="pars">视频赛事</text>
				</div>
				<div>
					>
				</div>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data(){
			return{
				user:{
					name:'',
					img:'',
				}
			}
		},
		methods: {
		// 登录
		login(){
			 let that=this
			uni.getUserProfile({
				desc:'完善用户信息',
				success: (info) => {
					console.log(info);
					that.user.img=info.userInfo.avatarUrl
					that.user.name=info.userInfo.nickName
				}
			})
		}
		}
	}
</script>

<style>
	.my {

		height: 100vh;
		background-color: #ff5d7e;
	}

	.login {
		height: 150px;
		/* background-color: #000; */
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.log {
		width: 50px;
		height: 50px;
		border-radius: 50%;

	}

	.myImg {
		width: 50px;
		height: 50px;
		background-color: #ffa600;
		border-radius: 50%;
		margin-top: 30px;

	}

	.but {
		width: 200px;
		color: #ffa600;
		margin-top: 10px;
	}

	.lies {
		margin-top: 30px;
 
		border-radius: 7px;

	}

	.tj {
		width: 20px;
		height: 20px;

	}

	.pars {
		margin-left: 10px;
	}

	.lies-bot {
		background-color: #fff;
		display: flex;
		margin: 0 10px;
		height: 50px;
		align-items: center;
		padding: 0 10px;
		justify-content: space-between;

	}
 	.imgsss{
		width: 20px;
		height: 20px;
	 
	}
	.buts{
		width: 30px;
		height: 30px;
	 
		border: 0 ;
		background-color: #fff;
		outline: 0;
	}
</style>
